<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation-name</title>
	<style type="text/css">
		body {
			background:#abcdef;
		}
		div {
			position:relative;
			width: 760px;
			height:760px;
			margin:auto;
			-webkit-transform-style:preserve-3d; /*使被转换的子元素保留其 3D 转换*/
			-moz-transform-style:preserve-3d;
			-ms-transform-style:preserve-3d;
			-o-transform-style:preserve-3d;
			transform-style: preserve-3d;
		}
		div > div {
			position:absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: auto;
			background-repeat:no-repeat;/*background-repeat 属性设置是否及如何重复背景图像。背景图像将仅显示一次。*/
			background-position: center;/*背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。*/
		}
		div > .inner {
			background-image:url("images/circle_inner.png");
			-webkit-animation-name:circle_inner;/*为@keyframes 动画规定一个名称：*/
			animation-name:circle_inner.png;
		}
		div > .middle {
			background-image: url("images/circle_middle.png");
			-webkit-animation-name:circle_middle;
			animation-name:circle_middle;
		}
		div > .outer {
			background-image: url("images/circle_outer.png");
			-webkit-animation-name:circle_outer;
			animation-name:circle_outer;
		}
		div > .imooc {
			background-image:url("images/imooc.png");
		}
		@keyframes circle_inner {
			from {transform: rotateX(0deg);}
			to{transform:rotateX(360deg);}
		}
		@keyframes circle_middle {
			from {transform:rotateX(0deg);}
			to {transform:rotate(360deg);}
		}
		@keyframes circle_outer {
			from {transform:rotateX(0deg);}
			to {transform:rotateX(360deg);}
		}
	</style>
</head>
<body>
<div>
	<div class="inner"></div>
	<div class="middle"></div>
	<div class="outer"></div>
	<div class="imooc"></div>	
</div>
</body>
</html>